<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>1354</title>

    <style>
        /*基本的样式*/

        button {
            width: 7.6rem;
            height: 1.5rem;
            font-size: 0.8rem;
            line-height: 1.5rem;
            background: red;
            color: white;
            font-weight: bold;
        }

        .hide {
            display: none;
        }

        .js-pop {

            width: 100%;

            height: 100%;

            z-index: 100;

            position: absolute;

            top: 0;

            left: 0;

            font-size: 0.24rem;

        }

        .js-pop .mask {

            position: fixed;

            top: 0;

            left: 0;

            width: 100%;

            height: 100%;

            background: #000;

            opacity: 0.2;

        }

        .js-pop .content {

            position: fixed;

            top: 50%;

            left: 50%;

            width: 5.80rem;

            height: 4.81rem;

            margin: -2.405rem 0 0 -2.9rem;

            background: url("http://spc.chooseauto.com.cn/img/7B7B27B74FCB4AE28FBFADABAC6209F1.jpg") no-repeat;

            background-size: contain;

            color: #262626;

            text-align: center;

        }

        .js-pop .content .close {

            position: absolute;

            top: .25rem;

            right: .08rem;

            width: .54rem;

            height: .48rem;

            z-index: 4;

            cursor: pointer;

        }

        .js-pop .content .prize-title {

            height: .39rem;

            min-width: 1.77rem;

            margin: .28rem auto;

            line-height: 0.39rem;

            color: white;

            text-align: left;

            text-indent: 1rem;

        }

        .js-pop .content .prize-content {

            color: #a40000;

            font-size: .24rem;

            margin: 0 0.1rem 0 0.49rem;

            line-height: 0.4rem;

            width: 5.2rem;

        }
    </style>

</head>

<body>
    <button id="bb">显示弹窗</button>
    <div class="js-pop js-prize-pop hide" id="popLogin">
        <p class="mask"></p>
        <p class="content">
            <p class="close"></p>
            <p class="prize-title">温馨提示</p>
            <p class="prize-content" style="margin-top: 1rem"> 登录后才能参与活动哦！ <br />

                自动登录跳转中......

            </p>

        </p>

    </div>

    <!--引入jquery-->

    <script type="text/javascript" src="http://image.37wan.cn/common/js/jquery-1.9.1.min.js"></script>

    <!--引入Pop组件-->

    <!-- <script src="pop.js"></script> -->

    <script>
        //  rem代码

        // 尺寸自适应方法，设计稿宽度750px
        (function (width) {
            var doc = width.document,
                element = doc.documentElement,
                i = 750,
                d = i / 50,
                o = "orientationchange" in width ? "orientationchange" : "resize",
                a = function () {
                    var width = element.clientWidth || 320;
                    width > 750 && (width = 750);
                    element.style.fontSize = width / d + "px"
                };
            doc.addEventListener && (width.addEventListener(o, a, !1), doc.addEventListener("DOMContentLoaded", a, !
                1))
        })(window);

        
        //Pop的构造函数

var Pop=function(wrap,option){

var $this=this;

var opt={

  closeCall:null

};

$.extend(opt,option);

var mask=wrap.find(".mask");

//特权方法：1、open()；2、close()；3、setPrize（）；4、setContent（）控制弹窗内显示的内容

this.open=function(){
  alert(2);
  wrap.show();
  mask.show();
  
};

this.close=function(callbalck){

  wrap.hide();

  mask.hide();

  opt.closeCall&&callbalck();

};

this.setPrize=function(text){

  wrap.find(".js-prize").text(text);

};

this.setContent = function (text) {

  wrap.find(".js-content").text(text);

};

function events(){

  wrap.on("click",".close",function(e){

    e.stopPropagation();

    $this.close(opt.closeCall);

  });

}

events();

};
//new一个Pop实例

var popLogin = new Pop($("#popLogin"));

$("#bb").on("click", function () {
    popLogin.open();

});
    </script>

</body>

</html>